<template>
  <div class="flex-between-center tw-h-90" style="width: 100%;">
    <span style="font-size: 24px;font-weight: 700;color: #171920;">{{ data.intentionalExam }}</span>
    <span class="flex-all-center" style="cursor: pointer;color: #9598a2;">
      <img alt="" src="@/assets/images/home/edit-icon.png" style="width: 14px;height: 14px">
      <span class="theme-hover font-small" style="margin-left: 5px"
            @click="data.showSelectExamDialog = true">修改意向考试</span>
    </span>
  </div>
  <div class="flex-start-center normal-text" style="width: 100%;">
    <div v-for="item in data.intentCourseList.slice(0, 4)">
      <div style="margin: 0 20px 20px 0">
        <CourseCard :courseItem="item"></CourseCard>
      </div>
    </div>
  </div>
  <SelectExamDialog :courseId="data.intentionalExamId" :visible="data.showSelectExamDialog"
                    @afterSelectExamHandle="afterSelectExamHandle"
                    @closeSelectExamDialog="closeSelectExamDialog"></SelectExamDialog>
</template>

<script setup>
import {onMounted, reactive, watch} from 'vue';
import {useRouter} from 'vue-router';
import SelectExamDialog from './select-exam-dialog.vue'
import CourseCard from './course-card.vue'
import {listGoods} from '../../api/goods.js'
import {changeUserInfo} from '../../api/user.js'
import {formatNull} from '../../utils/common.js'

const props = defineProps({
  intentionalExamId:{
    type: String
  },
  intentionalExam:{
    type: String
  },
  courseTypeList: {
    type: Array,
    default: []
  }
});
const router = useRouter();
const data = reactive({
  intentionalExamId: '',
  intentionalExam: '',
  intentCourseList: [],
  showSelectExamDialog: false,
  courseTypeList: []
});
function afterSelectExamHandle(item) {
  let selectCourseItem = item
  data.intentionalExamId = selectCourseItem.id
  data.intentionalExam = selectCourseItem.name
  closeSelectExamDialog()
  getIntentCourseList(data.intentionalExamId)
  let token = localStorage.getItem('token')
  if(token) {
    changeIntentCourse()
  }
}
function closeSelectExamDialog() {
  data.showSelectExamDialog = false
}
function changeIntentCourse() {
  let userName = localStorage.getItem('name')
  changeUserInfo({name:userName,intentionalExamId:data.intentionalExamId}, ()=>{
    localStorage.setItem('intentionalExamId',formatNull(data.intentionalExamId))
    localStorage.setItem('intentionalExam',formatNull(data.intentionalExam))
  })
}
function getIntentCourseList(id) {
  data.intentCourseList = []
  listGoods({categoryId: id}, (res) => {
    data.intentCourseList = res.data
    data.intentCourseList.map(item => {
      item.type = 'course'
    })
  })
}
const initData = () => {
  data.intentionalExamId = props.intentionalExamId || props.courseTypeList[0].id
  data.intentionalExam = props.intentionalExam || props.courseTypeList[0].name
}
onMounted(() =>{
  // initData()
})
watch(()=>[props.intentionalExamId, props.intentionalExam, props.courseTypeList], (newValue) =>{
  let [newIntentionalExamId,newIntentionalExam,newCourseTypeList] = newValue
  data.courseTypeList = newCourseTypeList
  data.intentionalExamId = newIntentionalExamId || props.courseTypeList[0].id
  data.intentionalExam = newIntentionalExam || props.courseTypeList[0].name
  getIntentCourseList(data.intentionalExamId)
  initData()
})

</script>

<style scoped>
.normal-text {
  font-size: 12px;
  color: #7C7B7B;
  font-weight: 400;
}
</style>
